<template>
  <m-page>
    <!-- 账单详情页 -->
    <m-header title="账单详情"></m-header>
    <div class="bill_detail">
      <ynet-cell-item title="2020年01月账单详情" class="detail_header">
        <div slot="left" class="left"></div>
      </ynet-cell-item>
      <!-- 上期未还 -->
      <div class="notyet_apply">
        <ynet-cell-item title="上期未还" class="not_aplly"></ynet-cell-item>
        <ynet-cell-item title="上次未还金额" brief="融易通卡 尾号（1234）" class="notyet_apply_item">
          <div slot="right">
            +
            <ynet-amount :value="3000" has-separator :precision="2" />
          </div>
        </ynet-cell-item>
        <ynet-cell-item title="循环利息" brief="融易通卡 尾号（1234）" class="notyet_apply_item">
          <div slot="right">
            +
            <ynet-amount :value="50" has-separator :precision="2" />
          </div>
        </ynet-cell-item>
      </div>
      <!-- 已出账单信息 -->
      <div class="bill_info">
        <div class="bill_info_item" v-for="item in billdata" :key="item.PUR_DATE" >
          <ynet-cell-item :title="item.PUR_DATE" class="not_aplly"></ynet-cell-item>
          <ynet-cell-item
            v-for="(element,index) in item.list"
            :key="index"
            :title="element.DESLINE1"
            :brief="element.DESLINE2+ '尾号（'+element.CARDEND+'）'"
            class="notyet_apply_item"
            @click="gotoTransactionDetail(item.PUR_DATE,element.ID)"
          >
            <div slot="right" :class="element.AMOUNT_FL === '-'? 'balck':''">
              {{element.AMOUNT_FL}}
              <ynet-amount :value="element.AMOUNT" has-separator :precision="2" />
            </div>
          </ynet-cell-item>
        </div>
      </div>
    </div>
  </m-page>
</template>

<script>
import { CellItem, Amount } from "ynet-mobile";
export default {
  components: {
    [CellItem.name]: CellItem,
    [Amount.name]: Amount
  },
  data() {
    return {
      billdata: [
        //账单数据
        {
          PUR_DATE: "02月18日", //消费日期
          list: [
            {
              ID:1,
              AMOUNT_FL: "-", //交易金额符号
              AMOUNT: "2100", //交易金额
              DESLINE1: "全额提前还款", //交易描述1
              DESLINE2: "融易通卡", //交易描述2
              CARDEND: "1234", //卡后4位
              TRANTYPE: "1" //交易类型  1 全额还款 2 手续费 3 自动还款手续费
            },
            {
              ID:2,
              AMOUNT_FL: "-",
              AMOUNT: "100",
              DESLINE1: "自动还款20190110手续费",
              DESLINE2: "融易通卡",
              CARDEND: "1234",
              TRANTYPE: "3"
            },
            {
              ID:3,
              AMOUNT_FL: "+",
              AMOUNT: "100",
              DESLINE1: "20190110手续费",
              DESLINE2: "融易通卡",
              CARDEND: "1234",
              TRANTYPE: "2"
            }
          ]
        },
        {
          PUR_DATE: "02月15日", //消费日期
          list: [
            {
              ID:1,
              AMOUNT_FL: "-", //交易金额符号
              AMOUNT: "2000", //交易金额
              DESLINE1: "20190104本金到期", //交易描述1
              DESLINE2: "融易通卡", //交易描述2
              CARDEND: "1234", //卡后4位
              TRANTYPE: "4" //交易类型  1 全额还款 2 手续费 3 自动还款手续费 4 本金到期
            },
            {
              ID:2,
              AMOUNT_FL: "-",
              AMOUNT: "100",
              DESLINE1: "20190104手续费",
              DESLINE2: "融易通卡",
              CARDEND: "1234",
              TRANTYPE: "2"
            }
          ]
        }
      ]
    };
  },
  created() {},
  mounted() {},
  methods:{
     //页面跳转
    goto(item, params) {
      let url = `http://172.16.1.239:8080/rong_yi_tong_card/${item}`;
      window.location.href = url;
      // app.api.pushWindow( url ,params )
    },
    //点击账单数据 进入交易详情页
    gotoTransactionDetail(time,id){
      let detail = {}
      let params = {}
      for(let i =0;i<this.billdata.length;i++){
        if(time === this.billdata[i].PUR_DATE){
          detail = this.billdata[i].list
        }
      }
      for(let i=0;i<detail.length;i++){
        if(id === detail[i].ID){
          params = detail[i]
        }
      }
      console.log(params)
      this.goto('bill_inquiry/transaction_detail.html',params)
    }
  },
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

